<template>
    <div class="content-body">
        <el-card class="content">
            <el-row class="button-papa">
                <el-button @click="deletCheckLog" class="delete_danger" type="danger" icon="el-icon-delete" circle
                    size="mini"></el-button>
                <el-button @click="deleteAllLog" title="清空所有日志" class="clear_danger" type="warning" icon="el-icon-brush"
                    circle size="mini">
                </el-button>
            </el-row>
            <el-table class="content-center" ref="multipleTable" :data="docs" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" v-model="value">
                </el-table-column>
                <el-table-column label="行为" width="width">
                    <template slot-scope="scope">
                        <el-tag type="primary">{{ scope.row.logs }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="类别" width="width">
                </el-table-column>
                <el-table-column prop="date" label="发生时间" width="width">
                </el-table-column>
                <el-table-column prop="name" label="操作" width="width">
                    <template slot-scope="{row,$index}">
                        <el-button @click="lookDiary(row)" class="clear_danger" type="warning"
                            icon="el-icon-document-copy" circle size="mini"></el-button>
                        <el-button @click="deleteRow(row)" class="delete_danger" type="danger" icon="el-icon-delete"
                            circle size="mini">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- //分页器 -->
            <!-- <div style="display:table;margin:0 auto;margin-top:10px"> -->
                 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="pageInfo.current" :page-sizes="[3, 5, 10]" :page-size="pageInfo.pageSize"
                layout="total,sizes, prev, pager, next" :total="pageInfo.totalItems">
            </el-pagination>
            <!-- </div> -->
        </el-card>


    </div>
</template>

<script>
import { reqGetList } from '@/api/systemOptionLog'
import { reqDeleteLogItem, reqDeleteAllLogItem, reqDeleteCheckLogItem ,reqGetPage} from '@/api/systemOptionLog'
export default {
    name: 'systemOptionLog',
    data() {
        return {
            show: false,
            value: [],
            docs: [],
            multipleSelection: [],
            pageInfo: {
                current: 1,
                pageSize: 10,
                searchkey: "",
                totalItems: 20,
                total: 1,
            },
            //选择项
            multipleSelection: []
        }
    },

    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        //收集选中的数据
        handleSelectionChange(val) {
            // this.multipleSelection = val;
            val.forEach((item) => {
                if (this.multipleSelection.indexOf(item.id) == -1) {
                    this.multipleSelection.push(item.id)
                }
            })
        },
        //删除选中的row
        deletCheckLog() {
            this.$confirm('您确认要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //刚才不是用用成功，这里需要通过.then来接收请求的回调  0: 6c225tKfM这里参数不对               
                var ids = this.multipleSelection.toString()
                console.log(ids);
                reqDeleteCheckLogItem({ ids: ids }).then((res) => {
                    //当请求成功的时候在给用户提示
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //挂载系统日志接口   
                    this.getList()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });

                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        //删除单个row
        deleteRow(row) {
            this.$confirm('您确认要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(row)
                //刚才不是用用成功，这里需要通过.then来接收请求的回调  0: 6c225tKfM这里参数不对 
                reqDeleteLogItem({ ids: row.id }).then((res) => {
                    //当请求成功的时候在给用户提示
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //挂载系统日志接口   
                    this.getList()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        //删除全部日志
        deleteAllLog() {
            this.$confirm('您确认要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //刚才不是用用成功，这里需要通过.then来接收请求的回调  0: 6c225tKfM这里参数不对 
                reqDeleteAllLogItem().then((res) => {
                    //当请求成功的时候在给用户提示
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //挂载系统日志接口   
                    this.getList()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        lookDiary(row) {
            this.$alert(row.logs, '日志详情', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: '关闭'
            });
        },
        //请求日志列表
        async getList(currents = 1) {
            this.pageInfo.current = currents
            const { current, pageSize } = this.pageInfo
            let result = await reqGetList({ current, pageSize })
            this.docs = result.data.docs
            this.pageInfo = result.data.pageInfo
            this.pageInfo.current = result.data.pageInfo.current
            this.pageInfo.pageSize = result.data.pageInfo.pageSize
            this.pageInfo.total = result.data.pageInfo.total
        },
        //改变每页条数
        async renderPageList(current = 1, pageSize = 10) {
            let searchkey = this.pageInfo ? this.pageInfo.searchkey : "";
            let state = this.pageInfo ? this.pageInfo.state : "";
            let user = this.pageInfo ? this.pageInfo.user : "";
            let targetCurrent = current;
             let result = await reqGetPage({
                current: targetCurrent,
                pageSize: this.pageInfo.pageSize,
                searchkey
            });
            this.docs = result.data.docs
            //ComponentPaginationEnd
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            let current = this.pageInfo ? this.pageInfo.current : 1;
             this.pageInfo.pageSize=val
            this.renderPageList(current, val);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            let pageSize = this.pageInfo ? this.pageInfo.pageSize : 10;
            this.renderPageList(val, pageSize);
        }
    },
    mounted() {
        //挂载系统日志接口   
        this.getList()
    },

}
</script>

<style lang="scss">
.content-body {
    background-color: #f5f7f9;
    padding: 0 20px;

    .el-pagination {
        text-align: center;
        margin-top: 20px;
    }

    .content {
        .button-papa {
            margin-top: 25px;
            margin-left: 15px;

            .delete_danger {
                color: pink;
                background-color: #fef0f0;
            }

            .delete_danger:hover {
                background-color: #F56C6C;
            }

            .clear_danger {
                color: #E6A23C;
                background: #fdf6ec;
                border-color: #f5dab1;
            }

            .clear_danger:hover {
                color: #FFF;
                background-color: #E6A23C;
                border-color: #E6A23C;
            }
        }

        .content-center {
            .delete_danger {
                color: pink;
                background-color: #fef0f0;
            }

            .delete_danger:hover {
                background-color: #F56C6C;
            }

            .clear_danger {
                color: #409EFF;
                background: #ecf5ff;
                border-color: #b3d8ff;
            }

            .clear_danger:hover {
                color: #FFF;
                background-color: #409EFF;
                border-color: #409EFF;
            }
        }
    }
}
</style>